<template>
    <div>
      <span>
        <input
          type="checkbox"
          @change="checkAllTodos"
          :checked="isAllTrue()"
        />全选和取消全选
      </span>
      <span> 已完成{{ getCheckedNum() }}/全部{{ todoFooter.length }} </span
      >&nbsp;&nbsp;
      <button @click="delAll">清除已完成内容</button>
    </div>
  </template>
  
  <script>
  export default {
    name: "todoFooter",
    props: ["checkAll", "todoFooter", "delAll", "todos"],
    mounted() {
      console.log(this.todoFooter);
    },
    methods: {
      checkAllTodos(ev) {
        this.checkAll(ev.target.checked);
      },
      getCheckedNum() {
        // 只要是isdone 是true 都在统计之内
        let res = this.todoFooter.reduce((prev, cur) => {
          if (cur.isdone) {
            prev += 1;
          }
          return prev;
        }, 0);
        return res;
      },
      isAllTrue() {
        for (let i = 0; i < this.todos.length; i++) {
          if (!this.todos[i].isdone) {
            return false;
          }
        }
        // for循环结束后执行
        return true;
      },
    },
  };
  </script>
  
  <style lang='stylus' scoped></style>
  